<table class="table" mat-table [dataSource]="adapters">
    <ng-container matColumnDef="adapter_number">
        <th mat-header-cell *matHeaderCellDef> Adapter number </th>
        <td mat-cell *matCellDef="let element"> Adapter {{element.adapter_number}} </td>
    </ng-container>

    <ng-container matColumnDef="port_name">
        <th mat-header-cell *matHeaderCellDef> Port name </th>
        <td mat-cell *matCellDef="let element"> Ethernet {{element.adapter_number}} </td>
    </ng-container>

    <ng-container matColumnDef="adapter_type">
        <th mat-header-cell *matHeaderCellDef> Adapter type </th>
        <td mat-cell *matCellDef="let element; let i = index;">
            <mat-select placeholder="Type" [(ngModel)]="element.adapter_type">
                <mat-option *ngFor="let type of networkTypes" [value]="type">
                    {{type}}
                </mat-option>
            </mat-select>
        </td>
    </ng-container>

    <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef> Actions </th>
        <td mat-cell *matCellDef="let element">
            <button mat-icon-button matTooltip="Delete adapter" (click)="delete(element)">
                <mat-icon aria-label="Delete adapter">delete</mat-icon>
            </button>
        </td>
    </ng-container>
    
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<button mat-button class="form-field" (click)="onAdd()">Add</button>
